<!DOCTYPE html>
<p translate="ELEMENTS.DESCRIPTION" translate-values="{ct:ct}"></p>
{{ 'ELEMENTS.BUY_AMOUNT' | translate }}:
<button type="button" class="btn btn-default" ng-click="ct.util.nextAmount(ct.state.player, 'elementBuyIndex', ct.buyAmount)">
            {{ct.buyAmount[ct.state.player.options.elementBuyIndex]}}
          </button>
<get-html value="'dark_matter'"></get-html>
<br>
{{ 'ELEMENTS.SORT' | translate }} <select name="sort" ng-model="ct.state.player.options.elementSortIndex">
  <option value="0">{{ 'ELEMENTS.NUMBER' | translate }}</option>
  <option value="1">{{ 'ELEMENTS.CHANCE' | translate }}</option>
</select>
<p>
  {{ 'ELEMENTS.LEGEND' | translate }}
  <table class="table" class="col-xs-4">
    <tr>
      <th>
        {{ 'ELEMENTS.COLOR' | translate }}
      </th>
      <th>
        {{ 'ELEMENTS.STATE' | translate }}
      </th>
      <th>
        {{ 'ELEMENTS.HIDE' | translate }}
      </th>
    </tr>
    <tr>
      <td class="element_purchased">
      </td>
      <td>
        {{ 'ELEMENTS.PURCHASED' | translate }}
      </td>
      <td>
        <input type="checkbox" ng-model="ct.state.player.options.hideElementsPurchased">
      </td>
    </tr>
    <tr>
      <td class="element_available">
      </td>
      <td>
        {{ 'ELEMENTS.AVAILABLE' | translate }}
      </td>
      <td>
        <input type="checkbox" ng-model="ct.state.player.options.hideElementsAvailable">
      </td>
    </tr>
    <tr>
      <td class="element_unavailable">
      </td>
      <td>
        {{ 'ELEMENTS.UNAVAILABLE' | translate }}
      </td>
      <td>
        <input type="checkbox" ng-model="ct.state.player.options.hideElementsUnavailable">
      </td>
    </tr>
  </table>
</p>
<div class="row">
  <div ng-repeat="element in ct.visibleTableElements(ct.state.player)" class="col-xs-4">
    <div class="thumbnail">
      <div ng-class="ct.elementClass(element, ct.state.player)">
        <span class="label label-default element_label" ng-if="ct.data.elements[element].abundance === 0">{{ 'ELEMENTS.SYNTHETIC' | translate }}</span>
        <div class="element_number">{{ct.data.elements[element].number}}</div>
        <h2 class="element_symbol">{{element}}</h2>
      </div>
      <div class="symbol_name" ng-class="ct.elementSecondaryClass(element, ct.state.player)">
        {{ct.data.elements[element].name}}
      </div>
      <p>
        {{ 'ELEMENTS.ABUNDANCE' | translate }}:
        <pretty value="ct.data.elements[element].abundance*100"></pretty>%
      </p>
      <p>
        {{ 'ELEMENTS.ISOTOPES' | translate }}: {{ct.keys(ct.data.elements[element].isotopes).length}}
      </p>
      <p>
        {{ 'ELEMENTS.REDOXES' | translate }}: <span ng-if="ct.data.elements[element].ionization_energy.length > 0">
                 +{{ct.data.elements[element].ionization_energy.length}},
               </span> {{-ct.data.elements[element].electron_affinity.length}}
      </p>
      <div class="hidden_block" ng-hide="ct.data.elements[element].abundance === 0 ||
                    ct.state.player.elements[element]">
        <p ng-click="ct.buyElement(element, ct.state.player)" class="btn btn-default">
          {{ 'ELEMENTS.BUY' | translate }}
        </p>
        {{ct.outcome[element]}}
        <p>
          {{ 'ELEMENTS.SUCCESS' | translate }}:
          <pretty value="ct.getChance(element, ct.state.player)*100"></pretty>%
        </p>
      </div>
    </div>
  </div>
</div>
